<template>
  <div>
    <el-row>
      <el-select v-model="queryData.cid" placeholder="请选择主类目"
                 size="mini"
                 @change="jump(1)"
                 clearable>
        <el-option v-for="item in cate" :key="item.value" :label="item.cateName"
                   :value="item.cid">
        </el-option>
      </el-select>

      <label title="商品编号"> 商品编号 </label>
      <el-input style="width:160px" v-model="queryData.itemCode"></el-input>
      <el-button type="primary" @click="jump(1)">搜索</el-button>
      <el-button type="primary" @click="openAdd">添加热销商品</el-button>
    </el-row>
    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="weight" label="权重">
        <template slot-scope="scope">
          <template>{{scope.row.weight}}</template>
          <br>
          <el-button type="text" @click="openWeight(scope.row)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="itemId" label="商品id"></el-table-column>
      <el-table-column prop="itemCode" label="商品编号"></el-table-column>
      <el-table-column prop="cateName" label="类目名称"></el-table-column>
      <el-table-column prop="title" label="商品名称"></el-table-column>
      <el-table-column label="首页展示图">
        <template slot-scope="scope">
          <template v-if="scope.row.imgs">
            <template v-for="item in scope.row.imgs">
              <img :src="item" style="margin-left: 20px;max-height: 60px;max-width: 60px">
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="doDelete(scope.row.hotId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="addShow" width="30%">
      <el-form>
        <el-form-item label="输入商品编号">
          <el-input v-model="itemCode" placeholder="请输入商品编号"></el-input>
        </el-form-item>
        <el-form-item label="weight">
          <el-input v-model="weight" placeholder="请输入展示权重"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="addShow = false">取 消</el-button>
         <el-button type="primary" @click="doAdd">确 定</el-button>
       </span>
    </el-dialog>
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="weightShow" width="30%">
      <el-form>
        <el-form-item label="权重">
          <el-input v-model="modData.weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="weightShow = false">取 消</el-button>
         <el-button type="primary" @click="modWeight">确 定</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    ajax,
    selMainCate,
    hotItemList,
    modifyHotItem,
    delHotItem,
    addHotItem,
    itemCodeToId
  } from "../../data/service";

  export default {
    data() {
      return {
        cate: [],
        queryData: {
          cid: -1,
          itemCode: ''
        },
        tableData: [],
        page: 1,
        total: 0,
        hotId: '',
        addShow: false,
        itemId: '',
        weight: '',
        itemCode: '',//
        modData: {},//修改的参数对象
        tuijian: { // 推荐是为了下拉框选择，需要放入cate数组里
          cateName: "推荐",
          cid: -1,
          label: "推荐",
          level: 2,
          parentCid: -1,
          weight: 1000
        },
        weightShow: false
      }
    },
    mixins: [ajax],
    created() {
      this.getList();
      this.getMainCate();
    },
    methods: {
      //查询主类目
      getMainCate() {
        this.doajax(selMainCate, {}, resp => {
          this.cate = resp.data;
          this.cate.unshift(this.tuijian);
        });
      },
      //表格数据
      getList() {
        this.doajax(hotItemList,
          {
            page: this.page,
            cid: this.queryData.cid === undefined ? "" : this.queryData.cid,
            itemCode: this.queryData.itemCode === undefined ? "" : this.queryData.itemCode,
          }, resp => {
            this.tableData = resp.data;
            this.total = resp.total;
          });
      },
      //打开添加页面
      openAdd() {
        this.addShow = true;
      },
      doAdd() {
        this.doajax(itemCodeToId, {itemCode: this.itemCode}, res => {
          this.doajax(addHotItem,
            {
              itemId: res.itemId,
              weight: this.weight,
              cid: this.queryData.cid === undefined ? "" : this.queryData.cid
            },
            resp => {
              this.success("添加成功");
              this.itemId = '';
              this.weight = '';
              this.itemCode = '';
              this.getList();
              this.addShow = false;
            });
        });
      },
      jump(val) {
        console.log(this.cid);
        this.page = val;
        this.getList();
      },
      //删除
      doDelete(val) {
        this.hotId = val;
        this.$confirm('确定删除该广告位吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.doajax(delHotItem, {
              hotId: this.hotId === undefined ? "" : this.hotId
            },
            resp => {
              this.getList();
              this.success("删除成功");
            });
        }).catch(() => {

        });
      },
      openWeight(row) {
        this.modData.weight = row.weight;
        this.modData.hotId = row.hotId;
        this.weightShow = true;
      },
      modWeight(){
        this.doajax(modifyHotItem,{
          hotId:this.modData.hotId,
          weight:this.modData.weight
        },resp=>{
            this.getList();
            this.weightShow = false;
            this.success("修改成功");
        });
      }
    }
  }
</script>

<style>
  .el-select > .el-input {
    width: 150px;
    margin: 10px 0;
  }

  .el-select .el-input__inner {
    width: 150px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }
</style>

